<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Layui</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
        <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
        <!-- 引入 layui.js -->
        <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <div class="layui-box layui-container">

            <div style="padding: 20px; background-color: #FFF; overflow: hidden;"> 
                <div class="layui-row layui-col-space15"> 

                    <form class="layui-form" action="#">
                        <div class="layui-form-item">
                            <label class="layui-form-label">配置中文</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" value="{$config['title']}">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">配置标识</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input" value="{$config['name']}">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">配置类型</label>
                            <div class="layui-input-block">
                                <select name="type" lay-verify="required" lay-filter="type">
                                    <option value=""></option>
                                    <option value="varchar" {eq name="config.type" value="varchar"}selected{/eq}>varchar</option>
                                    <option value="text" {eq name="config.type" value="text"}selected{/eq}>text</option>
                                    <option value="number" {eq name="config.type" value="number"}selected{/eq}>number</option>
                                    <option value="datetime" {eq name="config.type" value="datetime"}selected{/eq}>datetime</option>
                                    <option value="array" {eq name="config.type" value="array"}selected{/eq}>array</option>
                                    <option value="select" {eq name="config.type" value="select"}selected{/eq}>select</option>
                                    <option value="image" {eq name="config.type" value="image"}selected{/eq}>image</option>
                                    <option value="file" {eq name="config.type" value="file"}selected{/eq}>file</option>
                                    <option value="checkbox" {eq name="config.type" value="checkbox"}selected{/eq}>checkbox</option>
                                    <option value="radio" {eq name="config.type" value="radio"}selected{/eq}>radio</option>
                                    <option value="bool" {eq name="config.type" value="bool"}selected{/eq}>bool</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">配置分组</label>
                            <div class="layui-input-block">
                                <select name="group" lay-filter="group">
                                    <option value=""></option>
                                    <option value="0">写作</option>
                                    <option value="1" selected="">阅读</option>
                                    <option value="2">游戏</option>
                                    <option value="3">音乐</option>
                                    <option value="4">旅行</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">默认值</label>
                            <div class="layui-input-block">
                                <textarea name="value" placeholder="请输入配置默认值" lay-reqtext="用户名是必填项，岂能为空？" class="layui-textarea" style="min-height:50px;">{present name="config.value"}{$config['value']}{/present}</textarea>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">可选值</label>
                            <div class="layui-input-block">
                                <textarea name="content" placeholder="请输入配置可选值" class="layui-textarea" class="layui-textarea" style="min-height:50px;">{present name="config.content"}{$config['content']}{/present}</textarea>
                            </div>
                        </div>


                        <div class="layui-form-item">
                            <label class="layui-form-label">验证规则</label>
                            <div class="layui-input-block">
                                <input type="text" name="rule" lay-verify="title" autocomplete="off" placeholder="请输入验证规则，仅可使用layui内置规则" class="layui-input" value="{$config['rule']}">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">提示信息</label>
                            <div class="layui-input-block">
                                <input type="text" name="tip" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入提示信息" autocomplete="off" class="layui-input" value="{$config['tip']}">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">错误信息</label>
                            <div class="layui-input-block">
                                <input type="text" name="msg" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入提示信息" autocomplete="off" class="layui-input" value="{$config['msg']}">
                            </div>
                        </div>

                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">扩展信息</label>
                            <div class="layui-input-block">
                                <textarea name="extend" placeholder="默认为空" class="layui-textarea" class="layui-textarea" style="min-height:50px;">{present name="config.extend"}{$config['extend']}{/present}</textarea>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">配置状态</label>
                            <div class="layui-input-block">
                                <input type="radio" name="status" value="1" title="启用" {eq name="config.status" value="1"}checked{/eq} />
                                <input type="radio" name="status" value="0" title="禁用" {eq name="config.status" value="0"}checked{/eq} />
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit="" lay-filter="update">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>

                </div> 
            </div>

        </div>

        <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
        <script>
            layui.use(['form', 'layedit', 'laydate'], function(){
                var form = layui.form
                ,layer = layui.layer

                //自定义验证规则
                form.verify({
                    title: function(value){
                        if(value.length < 2){
                            return '标题至少得2个字符';
                        }
                    }
                    ,pass: [
                    /^[\S]{6,12}$/
                    ,'密码必须6到12位，且不能出现空格'
                    ]
                    ,content: function(value){
                        layedit.sync(editIndex);
                    }
                });

                //监听指定开关
                form.on('switch(switchTest)', function(data){
                    layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
                        offset: '6px'
                    });
                    layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
                });

                //监听提交
                form.on('submit(update)', function(data){
                    $.ajax({
                        url: "{:url('setConfig',['name'=>$name, 'configKey'=>$configKey, 'configName'=>$configName])}",  
                        dataType: "json",   //返回格式为json
                        async: true,
                        data: data.field,    //参数值
                        type: "POST",   //请求方式
                        success: function(req){
                            console.log(req);
                            //请求成功时处理
                            if(req.code == 200){
                                layer.msg('写入成功', {icon: 6}, function(){
                                    var index = parent.layer.getFrameIndex(window.name) //  先得到当前iframe层的索引
                                    parent.layer.close(index)   //  再执行关闭
                                    window.parent.location.reload() //  刷新父级页面
                                });
                            }else{
                                layer.msg('发送失败 '+req.msg, {icon: 5});
                            }
                        },
                        error: function(){
                            //请求出错处理
                            layer.msg('发送失败', {icon: 5});
                        }
                    });
                    return false;
                });
            });
        </script>
    
    </body>
</html>